<template>
  <n-modal
    v-model:show="show"
    style="width: 600px"
    class="custom-card"
    preset="card"
    title="详情"
    size="huge"
    :bordered="false"
  >
    <n-descriptions label-placement="left" bordered :column="1">
      <n-descriptions-item v-for="item in props.list" :key="item.key" :label="item.label">
        <component :is="item.render()" v-if="item.render" />
        <span v-else>{{ item.value || '--' }}</span>
      </n-descriptions-item>
    </n-descriptions>
  </n-modal>
</template>

<script lang="ts" setup generic="T extends { key: string; label: string; value?: any; render?: () => any }">
interface Props {
  list: Array<T>
  show: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
}>()

const show = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value),
})
</script>

<style lang="less" scoped>
//
</style>
